<template>
  <div class="page-wrapper">
    <div class="wrapper">
      <a-flex class="top" vertical align="center">
        <span style="font-size: 20px; line-height: 32px; font-weight: bold">新时代全缘持股</span>
        <span style="font-size: 40px; line-height: 64px; font-weight: bold">商务社交平台</span>
      </a-flex>
      <a-flex vertical align="center" style="color: white">
        <img src="/@/assets/images/h5/icon-vector.png" alt="" style="margin-bottom: 8px" />
        <span style="margin-bottom: 12px">当前平台累计用户</span>
        <span style="margin-bottom: 35px">4,103,000人</span>
        <img src="/@/assets/images/h5/bg-white-ecological.png" alt="" />
      </a-flex>
      <div class="main-wrapper">
        <div class="title-wrapper"></div>
        <div class="title">平台简介</div>
        <div class="content-wrapper">
          <div class="content">
            <a-flex class="content-box" vertical align="center">
              <div class="content-conclusion">新时代创新型全员持股商务社交平台</div>
              <p class="content-paragraph">
                治谈是新时代创新型全员持股商务社交平台，支持即时通讯、音视频通话、直播聊天室、多人会议、项目/兴趣治谈室、人脉圈、公众号等多种社交群聊功能，致力于赋能互联网社群粉丝经济，帮助项目方和团队长搭建并高效管理私域流量。
              </p>
            </a-flex>
          </div>
        </div>
      </div>
      <div class="main-wrapper">
        <div class="title-wrapper"></div>
        <div class="title">平台愿景</div>
        <div class="content-wrapper">
          <div class="content">
            <a-flex class="content-box" vertical align="center">
              <div class="content-conclusion">践行全员持股模式，助力全民共同富裕</div>
              <p class="content-paragraph">
                洽谈践行互联网web3.0共享精神通过免费发放“金币”与全体用户建立沟通桥梁，并计划将98%平台股权以公开公平公正原则分发给全体用户，实现全员持股。最后，与全体股东一起分享平台成长产生的巨大商业红利，从而在真正意义上实现全民“共同富裕”。
              </p>
            </a-flex>
          </div>
        </div>
      </div>
      <div class="main-wrapper">
        <div class="title-wrapper"></div>
        <div class="title">核心玩法</div>
        <div class="content-wrapper">
          <div class="content">
            <a-flex class="content-box" vertical align="center">
              <div class="content-conclusion">web3.0共享精神，推进全民“共同富裕”</div>
              <div class="content-title">金币</div>
              <p class="content-paragraph">
                “金币”是平台发行的全生态应用核心积分，100%免费发放给全体用户，与全体用户建立沟通桥梁的同时用于评估用户对平台生态建设的贡献度。
              </p>
              <p class="content-paragraph">
                每日用户登录签到即可免费获得24小时的“金币”奖励，随着平台人数不断增加，“金币”奖励也将随之减少。
              </p>
              <a-flex class="main-row">
                <a-flex class="main-card" vertical align="center">
                  <img class="image" src="../../../assets/images/h5/icon-team-support.png" alt="" />
                  <span class="label">红包转账</span>
                </a-flex>
                <a-flex class="main-card" vertical align="center">
                  <img class="image" src="../../../assets/images/h5/icon-team-support.png" alt="" />
                  <span class="label">直播打赏</span>
                </a-flex>
                <a-flex class="main-card" vertical align="center">
                  <img class="image" src="../../../assets/images/h5/icon-team-support.png" alt="" />
                  <span class="label">股权兑换</span>
                </a-flex>
                <a-flex class="main-card" vertical align="center">
                  <img class="image" src="../../../assets/images/h5/icon-team-support.png" alt="" />
                  <span class="label">增值权益</span>
                </a-flex>
              </a-flex>
              <div class="content-title">工币</div>
              <p class="content-paragraph">
                “工币”是平台股权映射确权积分，“工币”限量发行100亿个，初始兑换定价为1元，用户持有“工币”越多，则代表所占平台权益份额越大。
              </p>
              <p class="content-paragraph">
                “工币”兑换价格随着平台发展每日变化，早期用户可通过“金币”以实时价格进行免费兑换，从而实现平台“全员持股”。
              </p>
              <ChartPie
                chartId="equity-distribution-chart"
                height="135px"
                :options="equityDistributionChartOptions"
                style="width: 100%; margin-top: 40px; margin-bottom: 10px"
              />
              <div class="content-title">工币估值走势图</div>
              <a-flex
                :style="{ width: '100%', fontSize: '10px', lineHeight: '14px' }"
                justify="space-between"
              >
                <span>
                  <span>今日价格：</span>
                  <span :style="{ color: '#FD436A' }">1 洽股=5.9778元</span>
                </span>
                <span>
                  <span>令日涨幅：</span>
                  <span :style="{ color: '#FD436A' }">+0.23%</span>
                </span>
              </a-flex>
              <ChartLine
                chartId="valuation-trend-chart"
                height="200px"
                :options="valuationTrendChartOptions"
                style="width: 100%"
              />
              <span :style="{ fontSize: '10px', color: '#979797', lineHeight: '14px' }">
                *数据仅展示最近7天
              </span>
            </a-flex>
          </div>
        </div>
      </div>
      <div style="height: 60px"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const valuationTrendData = ref([])
const valuationTrendChartOptions = computed(() => {
  return {
    xAxis: {
      data: valuationTrendData.value.map((_, i) => {
        const targetDate = new Date()
        targetDate.setDate(new Date().getDate() - valuationTrendData.value.length + i + 1)
        return targetDate
          .toLocaleDateString()
          .split('/')
          .slice(1)
          .map(($) => $.padStart(2, '0'))
          .join('.')
      }),
    },
    yAxis: {
      min: (p) => Math.floor(p.min * 100) / 100,
      max: (p) => Math.ceil(p.max * 100) / 100,
    },
    label: {
      show: true,
      fontSize: 10,
      fontWeight: 'bold',
      color: '#3D3D3D',
    },
    series: {
      type: 'line',
      symbol: 'circle',
      color: '#FD436A',
      data: valuationTrendData.value,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#FD436A',
            },
            {
              offset: 1,
              color: '#FD436A00',
            },
          ],
        },
      },
    },
  }
})

const equityDistributionData = ref([])
const equityDistributionChartOptions = computed(() => {
  const total = equityDistributionData.value.reduce((cur, item) => cur + item.value, 0) / 10
  const chartData = []
  const legendData = []
  equityDistributionData.value.forEach((item) => {
    const name = item.name + '(' + ((item.value / total) * 10).toFixed(0) + '%)'
    chartData.push({
      name,
      value: item.value,
      itemStyle: { color: item.color },
    })
    chartData.push({
      value: total / equityDistributionData.value.length,
      itemStyle: { color: '#ffffff00' },
    })
    legendData.push({ name })
  })
  return {
    legend: {
      left: '60%',
      top: 10,
      data: legendData,
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '100%'],
        center: ['30%', '50%'],
        data: [{ value: 1, itemStyle: { color: '#eeeeee' } }],
        label: { show: false },
      },
      {
        type: 'pie',
        clockwise: false,
        radius: ['60%', '90%'],
        center: ['30%', '50%'],
        data: chartData,
        label: { show: false },
      },
    ],
  }
})

onMounted(() => {
  setTimeout(() => {
    equityDistributionData.value = [
      { name: '用户持股', value: 9376, color: '#FD436A' },
      { name: '平台持股', value: 6226, color: '#EC7600' },
    ]
    valuationTrendData.value = [5.8725, 5.916, 5.9444, 5.948, 5.9593, 5.9641, 5.9778]
  }, 300)
})
</script>

<style lang="less" scoped>
.page-wrapper {
  height: 100%;
  background-color: #f4f4f4;
  overflow-y: auto;
}
.page-wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper {
  background-image:
    linear-gradient(to bottom, #fd436a, #df0f3b), url(/@/assets/images/h5/bg-yellow-ecological.png);
  background-size:
    100% 100%,
    100% auto;
  background-position:
    left top,
    left 610px;
  background-repeat: no-repeat;
}
.top {
  height: 442px;
  background-image: url(/@/assets/images/h5/bg-top-ecological.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  color: #ffffff;
  padding-top: 10px;
}
.main-wrapper {
  margin: 0 12px;
  padding-top: 18px;
  margin-bottom: 15px;
  position: relative;
  .title-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    width: 178px;
    height: 44px;
    background-color: #ffffff;
    border-radius: 22px;
    padding: 4px;
  }
  .title {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    width: 170px;
    height: 36px;
    border-radius: 18px;
    line-height: 36px;
    text-align: center;
    background-color: #f02d56;
    color: #fffc9c;
    font-size: 16px;
    &::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fffc9c;
    }
    &::after {
      content: '';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fffc9c;
    }
  }
  .content-wrapper {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 4px;
    position: relative;
    z-index: 11;
    .content {
      border-radius: 10px;
      border: 1px solid #f02d56;
      padding-top: 22px;
      .content-box {
        padding: 10px 18px 16px;
      }
      .content-conclusion {
        padding: 4px 14px;
        border-radius: 40px;
        background-color: #ffead9;
        color: #ec7600;
        min-width: 240px;
      }
      .content-title {
        font-size: 15px;
        line-height: 20px;
        color: #000000;
        padding: 32px 0;
      }
      .content-paragraph {
        font-size: 12px;
        line-height: 20px;
        color: #000000;
        padding-bottom: 6px;
      }
      .content-conclusion + .content-paragraph {
        margin-top: 20px;
      }
      .main-row {
        width: 100%;
        margin-top: 32px;
        .main-card {
          width: 100%;
          .image {
            width: 34px;
            height: 34px;
            margin-bottom: 12px;
          }
          .label {
            font-size: 12px;
            line-height: 17px;
            color: #000000;
          }
        }
      }
    }
  }
}
</style>
